/*
所有构件工具都基于node。js平台运行的~模块化默认采用commitjs
 */
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const path = require("path");

/*设置node环境变量:*/
process.env.NODE_ENV = "production";

module.exports = {
    mode:"development",
    entry:{
        index:path.join(__dirname,"./src/js/header.js")
    },
    output:{
        path:path.join(__dirname,"dist"),
        filename:"./js/[name].js"
    },
    module:{
        rules:[{
            test:/\.css$/,
            /*
            单独提取出css样式，把style-loader 替换成 MiniCssExtractPlugin.loader
            * */
            use:[
                MiniCssExtractPlugin.loader,
                "css-loader",
                /*
                    css兼容性处理：postcss -> postcss-loader postcss-preset-env
                    帮postcss找到 package.json 中browserslist里面的配置，通过配置加载指定的css兼容性样式

                    "browserslist": {
                        "development": [     //开发环境
                          "last 1 chrome version",
                          "last 1 firefox version",
                          "last 1 safari version"
                        ],
                        "production": [    生产环境 --》设置node环境变量
                          ">0.02%"
                        ]
                     }

                     开发环境 --》设置node环境变量:process.env.NODE_ENV = "development"
                * */
                //使用loader的默认配置
                "postcss-loader"
            ]
        },{
            test:/\.(jpg|png|gif)$/,
            loader:"url-loader",
            options: {
                limit: 8 * 1024,
                outputPath:"img"
            }
        },{
            test:/\.html$/,
            /*用来处理html中 img图片的（负责引入img）  */
            loader:"html-loader"
        },{
            test:/\.(eot|svg|ttf|woff|wpff2)$/,
            loader:"file-loader",
            options: {
                outputPath:"static/font"
            }
        }]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
        new MiniCssExtractPlugin()
    ],

    /*
    开发服务器 devServer:用来自动化
    特点：只会在内存中编译打包，不会有任何输出（要打包 直接使用webpack）
    开启devServer指令 npx webpack-dev-server
    * */
    devServer: {
        /* 项目构建后录井 */
        contentBase:path.join(__dirname,"dist"),
        /* 启动gzip压缩 */
        compress:true,
        open:true,
        host:"localhost",
        port:9709
    }
};
